<template>
  <div class="header-bg">
    <div class="header">
      <div class="time-box">{{ nowFormatDate }}<br/>{{ nowDay }}</div>
      <div class="date-box">{{ nowTime }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'topNav',
  data () {
    return {
      nowFormatDate: '',
      nowTime: '',
      nowDay: ''
    }
  },
  mounted () {
    this.nowFormatDate = this.getNowFormatDate()
    this.nowDay = this.getNowDay()
    setInterval(() => {
      this.nowTime = this.getNowTime()
    }, 1000)
  },
  methods: {
    getNowFormatDate () {
      let date = new Date()
      let seperator = '/'
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      let strDate = date.getDate()
      if (month >= 1 && month <= 9) {
        month = '0' + month
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = '0' + strDate
      }
      let currentDate = year + seperator + month + seperator + strDate
      return currentDate
    },
    parseTime (time) {
      if (time >= 0 && time <= 9) {
        time = '0' + time
      }
      return time
    },
    getNowTime () {
      let date = new Date()
      let seperator = ':'
      let hour = this.parseTime(date.getHours())
      let minute = this.parseTime(date.getMinutes())
      let second = this.parseTime(date.getSeconds())
      let currentTime = hour + seperator + minute + seperator + second
      return currentTime
    },
    getNowDay () {
      let day = new Date().getDay()
      let nowDay = ''
      if (day === 0) {
        nowDay = '星期日'
      } else if (day === 1) {
        nowDay = '星期一'
      } else if (day === 2) {
        nowDay = '星期二'
      } else if (day === 3) {
        nowDay = '星期三'
      } else if (day === 4) {
        nowDay = '星期四'
      } else if (day === 5) {
        nowDay = '星期五'
      } else if (day === 6) {
        nowDay = '星期六'
      }
      return nowDay
    }
  }
}
</script>
<style lang="less" type="text/less">
  .header {
    background-repeat: no-repeat;
    background-position: center top;
    background-size: auto 100%;
    height: 0.85rem;
    background-image: url('../assets/header.png');
  }
  .page2 .header {
    background-repeat: no-repeat;
    background-position: center top;
    background-size: auto 100%;
    height: 0.85rem;
    background-image: url('../assets/header2.png');
  }
  .header-bg {
    background-repeat: repeat-x;
    background-position: center top;
    background-size: auto 100%;
    height: 0.85rem;
    background-image: url('../assets/header-bg.png');
  }
  .date-box {
    float: right;
    color: #39D6FE;
    font-size: 0.24rem;
    margin-top: 0.08rem;
    margin-right: 0.4rem;
  }
  .time-box {
    float: right;
    color: #39D6FE;
    margin-right: 0.2rem;
    font-size: 0.14rem;
    line-height: 1.2;
    margin-top: 0.05rem;
  }
</style>
